<template>
    <div>
        <el-form ref="form" :model="brandForm" label-width="100px">
            <el-form-item v-if="is_update" label="ID">
                <span>{{ brandForm.brandId }}</span>
            </el-form-item>
            <el-form-item label="品牌名称">
                <el-input v-model="brandForm.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌描述">
                <el-input v-model="brandForm.desc"></el-input>
            </el-form-item>
            <el-form-item label="logo">
                <el-image class="image-class" :src="brandForm.imgUrl" fit="fill">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <el-button type="primary" icon="el-icon-upload2" circle @click="openImgBox"></el-button>
                <ImgBox :multiple="false" :box_visible.sync="box_visible" @on-close="close" @on-select="handleSelect">
                </ImgBox>
            </el-form-item>
            <el-form-item label="检索首字母">
                <el-input v-model="brandForm.firstLetter"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input type="number" v-model="brandForm.seq"></el-input>
            </el-form-item>
            <!-- <el-form-item label="状态">
                <el-switch v-model="brandForm.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </el-form-item> -->
            <el-form-item label="选择分类">
                <el-select v-model="categorySelectId" placeholder="请选择分类">
                    <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.name"
                        :value="item.categoryId"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addCategory">添加</el-button>
            </el-form-item>
            <el-form-item label="已选择分类">
                <el-tag v-for="category in selectedCategory" :key="category.categoryId" @close="removeCategory(category)"
                    closable type="success">
                    {{ category.name }}
                </el-tag>
            </el-form-item>
            <el-form-item>
                <el-button v-if="is_update" type="primary" @click="handleUpdate">提交修改</el-button>
                <el-button v-else type="primary" @click="handleAdd">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { category_level_list } from '@/api/product/category.js'
import { brand_save, brand_info, brand_update } from '@/api/product/brand.js'
export default {
    //import引入组件才能使用
    components: {},
    props: {
    },
    data() {
        return {
            box_visible: false,
            is_update: false,
            brandForm: {},
            categorySelectId: 0,
            categoryList: [],
            selectedCategory: [],
        };
    },
    // 计算属性
    computed: {
        categoryMap() {
            let map = {}
            this.categoryList.forEach(item => {
                map[item.categoryId] = item
            })
            return map
        }
    },
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        close() {
            this.box_visible = false
        },
        openImgBox() {
            this.box_visible = true
        },
        handleSelect(imgList) {
            this.brandForm.imgUrl = process.env.VUE_APP_MINIO_API + imgList[0].filePath
            this.box_visible = false
        },
        addCategory() {
            if (!this.selectedCategory.find(item => item.categoryId === this.categorySelectId)) {
                this.selectedCategory.push({ ...this.categoryMap[this.categorySelectId] })
            }

        },
        removeCategory(category) {
            this.selectedCategory.splice(this.selectedCategory.indexOf(category), 1);
        },
        handleUpdate() {
            this.brandForm.categoryIds = this.selectedCategory.map(item => item.categoryId)
            brand_update(this.brandForm).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                // this.$router.push({ name: "brand" })
            })
        },
        handleAdd() {
            this.brandForm.brandId = null
            this.brandForm.categoryIds = this.selectedCategory.map(item => item.categoryId)
            console.log(this.brandForm)
            brand_save(this.brandForm).then(res => {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                // this.$router.push({ name: "brand" })
            })
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        if (this.$route.params.id) {
            this.is_update = true
        }
        if (this.is_update) {
            brand_info(this.$route.params.id).then(res => {
                this.brandForm = res.data
                this.selectedCategory = res.data.categories
            })
        }
        category_level_list(0).then(res => {
            this.categoryList = res.data
            this.categorySelectId = res.data[0].id
        })
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped>
.image-class {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: rgb(248, 248, 248) 1px solid;
}
</style>